<template>
	<div class="container">
		<div class="abs">
			<el-page-header @back="$router.go(-1)" content="">
			</el-page-header>
		</div>
		<div class="main">
			<transition name="el-zoom-in-center">
				<div v-show="show2" class="title"><img src="../assets/images/库存分布.jpg" alt=""></div>
			</transition>
			<div class="show">
				<div id="main1"></div>
				<div id="main2"></div>
			</div>

		</div>
	</div>
</template>

<script>
// 按需导入 API 接口
import { getKuCunAPI } from '@/api/getKuCunAPI'
var colorList = [
  '#37A2DA',
  '#32C5E9',
  '#67E0E3',
  '#9FE6B8',
  '#FFDB5C',
  '#ff9f7f',
  '#fb7293',
  '#E062AE',
  '#E690D1',
  '#e7bcf3',
  '#9d96f5',
  '#8378EA',
  '#96BFFF',
  '#dd6b66',
  '#759aa0',
  '#e69d87',
  '#8dc1a9',
  '#ea7e53',
  '#eedd78',
  '#73a373',
  '#73b9bc',
  '#7289ab',
  '#91ca8c',
  '#f49f42'
]
export default {
  name: 'Echarts',
  data () {
    return {
      show2: false,
      aaa: {
        code: 0,
        data: {
          谷类: 1,
          薯类淀粉: 1,
          干豆类: 1,
          蔬菜类: 2,
          菌藻类: 1,
          水果类: 0,
          坚果种子: 0,
          畜肉类: 1,
          禽肉类: 1,
          乳类: 1,
          蛋类: 0,
          鱼虾蟹贝: 2,
          婴幼儿食品: 0,
          小吃甜饼: 0,
          速食食品: 0,
          软饮料: 0,
          酒精饮料: 1,
          糖蜜饯类: 2,
          油脂类: 0,
          调味品类: 1,
          药食及其它: 1
        },
        message: '提交成功'
      }
    }
  },
  methods: {
    async initKuCun () {
	    // 1. 调用 API 接口
	    const { data: res } = await getKuCunAPI()
	    // 2. 判断请求是否成功
	    if (res.message === '提交成功') {
	      // 3. 为用户的频道列表赋值
		  this.aaa = res
		  this.myEcharts()
	    }
	  },
    myEcharts () {
	  var goods = []
	  var num = []
	  // console.log(this.aaa.data)
	  for(var item of this.aaa.data){
		  goods.push(item.name)
		  num.push(item.value)
	  }
	  // console.log(goods)
	  // console.log(num)
      // var goods = Object.keys(this.aaa.data)
      // var num = Object.values(this.aaa.data)
      // var datas = this.aaa.data
      var echarts = require('echarts')
      var chartDom1 = document.getElementById('main1')
      var chartDom2 = document.getElementById('main2')
      var myChart1 = echarts.init(chartDom1, 'dark')
      var myChart2 = echarts.init(chartDom2, 'dark')
      var option1, option2
      option1 = {
        tooltip: {
          trigger: 'item'
        },
        yAxis: {
          type: 'category',
          data: goods
        },
        xAxis: {
          type: 'value'
        },
        grid: {
          right: '0',
          top: '0'
        },
        series: [{
          data: (function () {
            var a = num
            const b = []
            for (var i = 0; i < a.length; i++) {
              const x = {
                value: a[i],
                itemStyle: {
                  color: colorList[i]
                }
              }
              b.push(x)
            }
            return b
          })(),
          type: 'bar',
          radius: '30%'
        }],
        aria: {
          enabled: true,
          decal: {
            show: true
          }
        }
      }

      option2 = {
        // title: {
        //   text: 'Referer of a Website',
        //   subtext: 'Fake Data',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          top: 'top',
          // icon: 'rect', // 形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 20, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 15 // 设置间距

        },
        series: [{
          name: '数量',
          type: 'pie',
          radius: '70%',
          color: colorList,
   //        data: (function () {
   //          var list1 = []
   //          for (var key in datas) {
			//   console.log(key)
   //            list1.push({
   //              value: datas[key],
   //              name: key
   //            })
   //          }
			// console.log(list1)
   //          return list1
   //        }()),
		  data:this.aaa.data,
          // data: [{
          //   value: 1048,
          //   name: 'Search Engine'
          // }]
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }],
        aria: {
          enabled: true,
          decal: {
            show: true
          }
        }
      }

      option1 && myChart1.setOption(option1)
      option2 && myChart2.setOption(option2)
      echarts.connect([myChart1, myChart2])
    }
  },
  created () {
    this.initKuCun()
  },
  mounted () {
    this.show2 = true
  }
}
</script>

<style scoped>
	/* 全局导入公共样式 */
	@import url("../assets/css/common.css");

	body {
		margin: 0;
	}

	.container {
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: #100c2a;
		border: 1px solid #797979;
		overflow:hidden;
	}

	.main {
		width: 100%;
		height: 100%;
	}

	.title {
		width: 3.04375rem;
		height: 0.7rem;
		margin: 0.2625rem auto
	}

	.title img {
		width: 100%;
		height: 100%;
	}

	.main .show {
		width: 100%;
		height: 4.15625rem;
		margin-top: 0.375rem;
	}

	.show #main1,
	.show #main2 {
		float: left;
		width: 50%;
		height: 100%;
	}
</style>
